<template>
	<view class="">
		<u-popup :show="popupShow" :round="10" mode="center" :safeAreaInsetBottom="false" :closeable="true"
			:closeOnClickOverlay="false" @close="popupShow=false">
			<view class="code-popup">
				<view class="code-img">
          <view class="member-id">会员ID：{{memberId}}</view>
          <view class="qr-box">
            <u--image :src="memberCheckCodeQr" width="330rpx" height="330rpx"/>
          </view>
          <view class="validity">有效期至：{{validity}}</view>
					<view class="tips">向商家展示</view>
				</view>
			</view>
		</u-popup>

		<!--订单核销码 -->
		<u-popup :show="verifyShow" :round="10" mode="center" :safeAreaInsetBottom="false" :closeable="true" @close="closeVerifyPopup">
			<view class="code-popup">
				<view class="code-img">
					<u-image :src="verifyCodeQr" width="330rpx" height="330rpx"/>
					<view class="m-name">{{storeName}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "check-code",
		data() {
			return {
				popupShow: false,
				memberCheckCodeQr: null,
				memberId: '',
        validity: '',
				brightness: 0,

				verifyShow: false,
			};
		},
		props: {
			verifyCodeQr: {
				type: String,
				default() {
					return '';
				}
			},
			storeName: {
				type: String,
				default() {
					return '';
				}
			}
		},
		methods: {
			// 会员核销码弹窗
			checkCodeShow() {
				this.getCheckCodeQr()
			},
			getCheckCodeQr() {
				this.$api('member.getCheckCodeQr').then(res => {
					if (res.status == 0) {
						this.memberCheckCodeQr = this.$mWxQrCode.createQrCodeImg(res.data.tempId, {
							size: parseInt(165) //二维码大小
						})

						this.memberId = res.data.memberId;
            this.validity = res.data.validity;
						this.popupShow = true;

						uni.hideLoading()
					} else {
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(err=>{
					uni.hideLoading()
				})
			},

			closeVerifyPopup() {
				this.verifyShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.code-popup {
		width: 520rpx;
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.code-img {
			margin-top: 30rpx;
      font-size: $f-base;

			.member-id {
				text-align: center;
				margin-bottom: 20rpx;
				font-size: $f-base;
			}

      .qr-box{
        width: 330rpx;
        height: 330rpx;
        margin: 0 auto;
      }

      .validity{
        color: rgba(0, 0, 0, 0.7);
        margin-top: 20rpx;
      }

			.tips {
				text-align: center;
				margin-top: 40rpx;
				color:#000;
			}

			.m-name{
				text-align: center;
				margin-top: 40rpx;
				font-size: $f-lg;
			}
		}

	}
</style>
